<template>
    <div class="border">
        <el-input v-model="classselect" placeholder="请输入内容"></el-input>
    <el-dropdown>
  <span class="el-dropdown-link">
    <span v-if="query==''">查询条件</span> <span v-else-if="query=='cId'">课程号</span> <span
          v-else-if="query=='cName'">课程名</span> <i
          class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="query ='cId'">课程号</el-dropdown-item>
                    <el-dropdown-item @click="query ='cName'">课程名</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-button @click="queryclass" type="info" plain><i class="el-icon-search"></i></el-button>
        <el-button type="primary" @click="dialogFormVisible = true,statu='',form={}"
        >添加课程
        </el-button>

        <el-dialog :title="statu==''?'添加课程':'修改课程'" v-model="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="课程名" :label-width="formLabelWidth">
                <el-input v-model="form.cName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="任课老师" :label-width="formLabelWidth">
                <el-input v-model="form.teacher" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="课程时间" :label-width="formLabelWidth">
                <el-input v-model="form.cTime" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="statu=='update'" type="primary" @click="updateclass  ">确 定</el-button>
      <el-button v-if="statu==''" type="primary" @click="addclass  ">确 定</el-button>
    </span>
        </template>
        </el-dialog>
        <el-button v-if="deleteclass.length != 0"
                   style="margin-left: 420px"
                   size="mini"
                   type="danger"
                   @click="handleDelete()"
        >删除
        </el-button>
        <el-table
                border
                :data="classlist"
                stripe
                style="width: 95%; margin: 20px"
        >
            <el-table-column prop="cId" label="课程号" ></el-table-column>
            <el-table-column prop="cName" label="课程名" width=""></el-table-column>
            <el-table-column prop="cTime" label="课程时间" width=""></el-table-column>
            <el-table-column prop="teacher" label="任课老师"></el-table-column>
            <el-table-column width="250" label="操作">
                <template #default="scope">
                    <el-button size="mini" @click="detailsClass(scope.$index, scope.row)"
                    >详情
                    </el-button
                    >
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                    >删除
                    </el-button
                    >
                    <el-checkbox
                            style="margin-left: 10px"
                            v-model="classlist[scope.$index].checked"
                    ></el-checkbox>
                </template>
            </el-table-column>
        </el-table>

        <div class="sort"><span :style="sorts=='zheng'?'color:green; font-size:16px':''" class="sortleft" @click="sortzheng">正序</span>/<span @click="sortdao" :style="sorts=='dao'?'color:green; font-size:16px':''" class="sortright">倒序</span></div>
        <el-pagination

                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                v-model:currentPage="currentPage1"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="totalsize"
        >
        </el-pagination>
    </div>
</template>

<script>
    import {getclass,getClassByid,getClassByname,classdelete,updateclass,addclass} from "../network/class"
    import {mapState} from "vuex";
    export default {
        computed: {
            ...mapState(['classId'])
        },
        watch: {
            classlist: {
                handler(Nval) {
                    this.classlist = Nval;
                    this.deleteclass = []
                    for (let i = 0; i < this.classlist.length; i++) {
                        if (this.classlist[i].checked == true) {
                            if (this.deleteclass.indexOf(this.classlist[i].cId) == -1) {
                                this.deleteclass.push(this.classlist[i].cId)
                            }
                        }

                    }
                    console.log(this.deleteclass);
                },
                immediate: true,
                deep: true,
            },

        },
        created() {
            this.getclass()
        },
        name: "classlsit",
        data(){
            return{
                deleteclass:[],
                classselect:'',
                classlist:[],
                sort:'0',
                sorts:'zheng',
                query: '',
                currentpage: "1",
                pagesize: "7",
                totalpage: "",
                totalsize: "",
                dialogFormVisible: false,
                statu: '',
                form:{
                    cId:'',
                    cName:'',
                    teacher:'',
                    cTime:'',

                },
            }
        },
        methods:{
            detailsClass(i){
                this.$store.commit('changecId',this.classlist[i].cId)
                this.$router.push('/classdetails')
            },
            getclass(){
                getclass(this.currentpage, this.pagesize,this.sort).then((res) => {
                    this.classlist = res.data.courses;
                    this.totalpage = res.data.totalPage;
                    this.totalsize = res.data.totalSize;
                    for (let i = 0; i < this.classlist.length; i++) {
                        this.classlist[i]["checked"] = false;
                    }
                });
            },
            handleCurrentChange(val) {
                this.currentpage = val;
                this.getclass()
            },
            sortzheng(){
                this.sorts='zheng'
                this.sort='0'
                this.queryclass()
            },
            sortdao(){
                this.sorts='dao'
                this.sort='1'
                this.queryclass()
            },
            queryclass(){
                if (this.query == '' || this.query == 'cName') {
                    getClassByname(this.classselect,this.currentpage, this.pagesize,this.sort).then((res) => {
                        this.classlist = res.data.courses;
                        this.totalpage = res.data.totalPage;
                        this.totalsize = res.data.totalSize;
                        for (let i = 0; i < this.classlist.length; i++) {
                            this.classlist[i]["checked"] = false;
                        }
                    });
                }else {
                    getClassByid(this.classselect,this.currentpage, this.pagesize,this.sort).then((res) => {
                        this.classlist = res.data.courses;
                        this.totalpage = res.data.totalPage;
                        this.totalsize = res.data.totalSize;
                        for (let i = 0; i < this.classlist.length; i++) {
                            this.classlist[i]["checked"] = false;
                        }
                    });
                }
            },
            handleDelete(i) {
                if (this.deleteclass.length == 0) {
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        classdelete(this.classlist[i].cId).then(() => {
                            this.getclass()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        classdelete(this.deleteclass.toString()).then(() => {
                            this.getclass()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            handleEdit(i) {
                this.form = this.classlist[i]
                this.dialogFormVisible = true
                this.statu = 'update'
            },
            updateclass(){
                updateclass(this.form).then((res) => {
                    if (res.data == true) {
                        alert("修改成功")
                        this.getclass()
                    } else {
                        alert("no")
                    }
                    this.dialogFormVisible = false
                    this.statu = ''
                })
            },
            addclass(){
                addclass(this.form).then((res) => {
                    if (res.data == true) {
                        this.$message({
                            type: 'success',
                            message: "添加成功"
                        });
                        this.getclass()
                    } else {
                        alert("no")
                    }
                    this.dialogFormVisible = false
                    this.statu = ''
                })
            },
        }

    }
</script>

<style scoped>
    .border {
        width: 1220px;
        height: 600px;
        background-color: white;
    }
    .sortleft{
        margin-right: 5px;
        cursor: pointer;
    }
    .sortright{
        margin-left: 5px;
        cursor: pointer;
    }
    .sort{
        margin-left: 20px;
        font-size: 14px;
    }
    .border {
        width: 1220px;
        height: 600px;
        background-color: white;
    }

    .el-input {
        margin: 10px;
        margin-right: -3px;
        width: 400px;
    }

    .el-pagination {
        float: right;
        margin: 20px;
    }

    .el-dropdown {
        position: absolute;
        top: 25%
    }
</style>
